<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
		
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()           功能--
		                  1个参：传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						  2个参：传入css属性名和属性值
						  功能：获取匹配元素集合中所有元素的css属性值
						  n个参：传入多个css属性名和属性值
						  语法糖：css({"属性名":"属性值",
						              "属性名":"属性值",
						              .......
						              "属性名":"属性值"})
						   
		 width()和height()  功能：匹配元素集合中第一个元素宽高度
		                    无参：获取元素集合中第一个元素宽高度
							有参：设置匹配元素集合中第一个元素宽高度
							width(数值)
		 outerWidth()和outerHeight()
		 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 
		 -->
		 <style>
			.box{
				background: aqua;
				margin: 20px;
				padding: 20px;
				border: 5px solid red;
				
				
			} 
			.result{
				margin-top: 10px;
				font-weight: bold;
				background-size: 100%;
				
			}
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- css:  .box添加样式：背景颜色、内外边距：20px 边框
		           .result添加样式：上外边距：10px ，字体加粗
				   引入jq框架
		 
		 -->
		<!-- 1.显示效果区域 -->
		
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn"> 获取颜色属性值 </button>
		<button id="setColorbtn"> 设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素高度/设置元素宽度</button>
		<button id="bpBtn">获取高度(内边距+边框)</button>
		<button id="bpmBtn">获取高度（内外边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击 获取颜色属性值 按钮 获取颜色值并打印页面上 */
			$("#getColorbtn").click(function(){
				//获取css属性值方式：传入属性名即可
			var bgColor=$(".box").css("background-color");
			    //页面上打印属性值 
				$("#result").text("获取的属性值是："+bgColor);				
			});
			/* 2.点击 获取颜色属性值 按钮 获取颜色值并打印页面上 */
			$("#setColorbtn").click(function(){
				//改成橙色
				$(".box").css("background-color","orange");
				$("#result").text("改变后颜色为：橙色");
			});
			/* 3.点击 设置多属性效果 按钮 圆、背景色 */
			$("#setBtn").click(function(){
				$(".box").css({"background-color":"#ff0",
				                "border":"5px solid black",
				                "border-radius":"50%",
								"width":"300px",
								"height":"300px",
								 "background":"url(../img/钩子传说.png)",
								 "background-size":"100%",
								 "box-shadow":"5px 5px 10px red"
								 });
				$("#result").text("改变后的")				 
			});
			/* 4.点击  获取、设置宽度 */
			$("#gsBtn").click(function(){
		    var	ge=$(".box").width(400);
			$("#result").text("宽度为"+ge+"px");
			});
			/* 设置一个值不用接收，不然会出现object 把一个对象当值处理，不符合预期 */
			/* 5.点击 获取高度 按钮 计算box空间高度 */
			$("#bpBtn").click(function(){
			var bp=$(".box").outerHeight();
			$("#result").text("获取高度为："+bp+"px");
			});
			
			$("#bpmBtn").click(function(){
			var w=$(".box").outerHeight(true);
			$("#result").text("获取高度为："+w+"PX");
			});
		</script>
	</body>
</html>